<template>
	<view class="content">
		<div class="list2">
			<div>打分</div>
			<u-rate active-color="#FFD100" size="32" :disabled="see" v-model="appraiseData.rating" allowHalf="true">
			</u-rate>
		</div>
		<div class="list">
			<div>评价</div>
		<!-- 	<u-input v-model="appraiseData.comment" type="textarea" :border="border" height="150"
				placeholder="请输入评价内容" :disabled="see" /> -->
				
			<textarea v-model="appraiseData.comment"  placeholder="请输入评价内容" :disabled="see" maxlength="2000"/>
				<!-- <u-textarea v-model="appraiseData.comment" placeholder="请输入内容" ></u-textarea> -->
				
			<div style="display: flex;" v-if="see">
				<img :src="item" mode=""
					style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; margin-right: 16rpx;" 
					v-for="(item, index) in appraiseData.commentImage.split(',')" :key="index"
					@click="previewImage(item)"
				></img>
				<!-- <span v-html="videoSource"></span> -->
				<video :src="item"  mode=""  objectFit="cover"
					style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; " v-for="(item, index) in appraiseData.commentVideo.split(',')" 
					:key="index"  :show-play-btn="false" :show-fullscreen-btn="false"></video>
			</div>
			<div style="display: flex;" v-else>
				<view class="upload-img">
					<u-upload :fileList="fileList3" :before-upload="beforeUpload" @on-success="icoSuccess1"
						:header="headers" :action="action" @on-remove="delimgs1" :multiple="true" :maxCount="3"
						width="106rpx" height="106rpx" :deletable="true" :previewImage="true" :custom-btn="true"
						:limitType="['jpg', 'png', 'jpeg']">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<img src="../../static/img/pic.png" mode=""
								style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; "></img>
						</view>
					</u-upload>
				</view>
				<view class="upload-video" style="margin-left: 16rpx">
					<u-upload :fileList="fileList4" :before-upload="beforeUpload" @on-success="icoSuccess2"
						:header="headers" :action="action" @on-remove="delimgs2" :multiple="false" :maxCount="1"
						width="106rpx" height="106rpx" :deletable="true" :previewImage="true" :custom-btn="true"
						:limitType="['mp4']">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<img src="../../static/img/video.png" mode=""
								style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; "></img>
						</view>
					</u-upload>
				</view>
			</div>

		</div>
		<!-- <div class="list1">
          <u-checkbox v-model="init" shape="circle">匿名评价</u-checkbox> 
		</div> -->
		<!--  v-if=" see== false" -->
		<!-- <img src="../../static/img/icon3.png" alt="" class="refund" @click="feedBack()"> -->
		<div class="refund" @click="feedBack()" v-if=" see== false"> 提交评价 </div>
		<div class="refund" @click="goBack()" v-if=" see== true"> 返回 </div>

	</view>

</template>

<script>
	export default {
		onShow() {
			this.headers = {
				'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
				"Authorization": uni.getStorageSync('token') || 1,
				Clientid: uni.getStorageSync('clientID') || 1
			}
			// console.log(this.headers, 'headers是什么', 11111111)
		},
		
		// computed: {
		// 		// 计算属性的 getter
		// 		videoSource: function () {
		// 			// `this` 指向 vm 实例
		// 			return `<video controls autoplay style="width: 106rpx;height: 106rpx;position: relative; top: 0rpx; "><source src="${this.appraiseData.commentVideo}" type="video/mp4"></video>`;
		// 		}
		// 	},
		onLoad(params) {
			console.log(params)
			if (params.type == '1') {
				this.see = true;
				let data = {
					orderId: params.id,
					customerId: uni.getStorageSync('openId').userId
				}
				this.$http({
					url: this.$myApi.orderList + '?id=' + data.orderId + '&customerId='+ data.customerId,
					method: 'GET',
					hideLoading: true,
					// data: data,
					success: res => {
						if (res.code == 200) {
							// console.log(res, 333333333333)
							// appraiseData
							this.appraiseData = res.rows[0];
							console.log(this.appraiseData)
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: err => {
						uni.showToast({
							title: err.msg,
							duration: 2000,
							icon: 'none'
						});
					},
					complete: e => {
						uni.stopPullDownRefresh();
						let _this = this;
						setTimeout(() => {
							_this.videoShow = true;
						}, 100)
					}
				})
				return;
			}
			
			this.appraiseData.id = params.id;
			this.appraiseData.contactInformation = params.tel;
			
		},
		data() {
			return {
				videoShow: false,
				see: false,
				// 上传图片
				fileList1: [],
				fileList2: [],
				action: this.$myApi.upload,
				listImg: [], // 显示的图片列表，数组元素为对象，必须提供url属性
				filesArr: [], // 上传的图片列表(图片选择或者上传成功后，会保存在组件内部的lists数组中，数组元素为对象)
				filesArr1: [],
				limitType: ['jpg', 'png', 'jpeg'], // 允许的图片后缀
				headers: {},
				appraiseData: {
					"id": '',
					"userId": '',
					"orderId": '',
					"rating": '',
					"comment": '',
					"commentVideo": '',
					"commentImage": '',
					"contactInformation": '',
					"feedbackDate": '',
				}
			}
		},
		methods: {
			// 图片预览
			previewImage(image) {
				 uni.previewImage({
					current: 0,     // 当前显示图片的链接/索引值
					urls: [image],    // 需要预览的图片链接列表，photoList要求必须是数组
					loop:true   // 是否可循环预览
				});
			},
			// 返回
			goBack() {
				uni.navigateBack({  
					delta: 1 // 返回的页面数，默认为1，表示返回上一页  
				  });  
			},
			// 获取时间
			formatDateTime(date) {
				const year = date.getFullYear(); // 获取年份  
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，并补零  
				const day = date.getDate().toString().padStart(2, '0'); // 获取日期，并补零  
				const hours = date.getHours().toString().padStart(2, '0'); // 获取小时，并补零  
				const minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟，并补零  
				const seconds = date.getSeconds().toString().padStart(2, '0'); // 获取秒，并补零  

				// 组合成格式化的字符串  
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 评价
			feedBack() {
				// {
				// 	 "commentVideo": "63",
				// 	    "commentImage": "deserunt ullamco adipisicing ea",
				// 	    "comment": null,
				// 	    "rating": 4,
				// 	    "id": 100
				// }
				// this.appraiseData.feedbackDate = this.formatDateTime(new Date());
				// this.appraiseData.id = uni.getStorageSync('openId').orderId;
				this.appraiseData.userId = uni.getStorageSync('openId').userId;
				this.appraiseData.commentImage = this.fileList1.toString() || '';
				this.appraiseData.commentVideo = this.fileList2.toString() || '';
				this.$http({
					url: this.$myApi.addAppraise,
					method: 'POST',
					hideLoading: true,
					data: this.appraiseData,
					success: res => {
						if (res.code == 200) {
							uni.showToast({
								title: '评价成功，即将返回会员中心',
								duration: 2000,
								icon: 'none'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/newMy/index'
								})
							}, 2000)
						} else {
							uni.showToast({
								title: '评价失败，请检查后重试！',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: err => {
						uni.showToast({
							title: err.msg,
							duration: 2000,
							icon: 'none'
						});
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
				console.log(this.appraiseData)
			},
			// 上传图片的一些操作
			beforeUpload() {

			},
			icoSuccess1(e) {
				console.log(e, 112223, '上传完图片？？？？')
				this.fileList1.push(e.data.url)
				console.log("添加后--------", this.fileList1);
			},
			delimgs1(is) {
				console.log("删除--------", is);

				// arr.splice(ind,1);
				this.fileList1.splice(is, 1)
				console.log("删除后--------", this.fileList1);
			},
			icoSuccess2(e) {
				console.log(e, 112223, '上传完图片？？？？')
				this.fileList2.push(e.data.url)
				console.log("添加后--------", this.fileList2);
			},
			delimgs2(is) {
				console.log("删除--------", is);
			
				// arr.splice(ind,1);
				this.fileList2.splice(is, 1)
				console.log("删除后--------", this.fileList2);
			},
			tijiao() {
				var files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log("files----------", files)


				if (this.fileList.length <= 0) {
					this.$refs.uToast.show({
						title: '请上传图片',
						type: 'waring'
					})
					return
				}
				if (!this.froms.admTexts) {
					this.$refs.uToast.show({
						title: '请填写描述信息',
						type: 'waring'
					})
					return
				}
				this.froms.admImgs = this.fileList.toString();
				this.froms.admStatus = 3
				this.$http({
					url: this.active == 0 ? this.$api.baochangCreateObj : this.$api.dianyingCreateObj,
					method: 'POST',
					hideLoading: true,
					data: this.froms,
					success: res => {
						if (res.data) {
							this.shows = false
							this.froms = {}
							this.fileList = []
						}
						this.getUserInfo()

						this.$refs.uToast.show({
							title: res.message,
							type: 'success'
						})
					},
					complete: e => {
						uni.stopPullDownRefresh();
					}
				})
			},

			//删除图片
			deletePic(e) {
				console.log(e);
				this[`fileList${e.name}`].splice(e.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event, '这里是什么什么')
				
			},
			// 上传图片
			uploadFilePromise(url) {
				console.log('执行了 url', url)
				return new Promise((resolve, reject) => {
					

				})
			},
		}




	}
</script>
<style>
	page {
		background-color: #F6F9FF;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;

		.list {
			width: 690rpx;
			// height: 369rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 20rpx;
			padding-top: 20rpx;
			margin-bottom: 30rpx;
			padding-bottom: 14rpx;
		}

		.list1 {
			width: 690rpx;
			height: 74rpx;
			line-height: 70rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 30rpx;

		}

		.list2 {
			width: 690rpx;
			height: 99rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			// opacity: 1;
			margin-left: 30rpx;
			// margin-top: 20rpx;
			display: flex;
			padding-left: 20rpx;
			padding-top: 30rpx;
			margin-bottom: 49px;
		}

		.refund {
			width: 576rpx;
			height: 82rpx;
			// margin-top: 450rpx;
			// margin-left: 87rpx;
			position: absolute;
			left: 87rpx;
			bottom: 88rpx;
			text-align: center;
			background-color: #0DBA5A;
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			// font-weight: bold;
			border-radius: 12rpx;
			line-height: 82rpx;
			letter-spacing: 8rpx;
		}

	}

	::v-deep {
		.u-list-item {
			// margin-top: 5rpx;

			margin: 0rpx !important;
			margin-right: 10rpx !important;
			position: relative !important;
			top: -7rpx !important;
		}
		.u-input {
			width: 650rpx !important;
		}
		
		textarea {
			width: 650rpx !important;
			margin: 20rpx 0;
		}
	}

	.upload-video {
		::v-deep {
			.u-list-item {
				top: 0rpx !important;
			}
		}
	}
</style>

<style>
	page {
		background-color: #EFEFEF;
	}
</style>